<script setup lang="ts">
import TextInput from './components/Provider/TextInput.vue'
import Angle from './components/Provider/Angle.vue'
import Colors from './components/Provider/Colors.vue'
import TextView from './components/Consumer/TextView.vue'
import CodeView from './components/Consumer/CodeView.vue'

import type { ColorItem } from './shared/colorList'
import { useColorStore } from './stores/colorStore'
const colorStore = useColorStore()

// 修改颜色
const textChange = (value: string) => {
  colorStore.setText(value)
}

// 修改range
const rangeChange = (value: number) => {
  colorStore.setAngle(value)
}

// 修改color
const colorChange = (list: ColorItem[]) => {
  colorStore.setColorList(list)
}

</script>

<template>
  <div class="color-container">
    <div class="provider">
      <h1 class="title">EasyGradient</h1>
      <TextInput @text-change="textChange" />
      <Angle @range-change="rangeChange" />
      <Colors @color-change="colorChange" />
    </div>
    <div class="consumer">
      <TextView :text="colorStore.text" :angle="colorStore.angle" :color-list="colorStore.colorList" />
      <CodeView :angle="colorStore.angle" :color-list="colorStore.colorList" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.color-container {
  width: 980px;
  min-height: 656px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  border-radius: 12px;
  background-color: #fff;
  border: none;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 20%);

  >div {
    flex: 1;
  }

  .title {
    margin: 0;
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background: -webkit-linear-gradient(315deg, #42d392, #647eff);
  }

  .provider {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .consumer {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
